<template>
  <div class="content-section" :class="{ active: isActive }">
    <h2>AI K8S集群诊断专家</h2>
    <div class="chat-container">
      <div class="chat-messages" ref="chatMessagesRef">
        <div v-for="(message, index) in chatMessages" :key="index" :class="['message', message.type]">
          <div class="message-content">{{ message.content }}</div>
        </div>
      </div>
      <div class="chat-input">
        <input type="text" v-model="chatInput" @keyup.enter="sendChatMessage" placeholder="请输入您的问题...">
        <button @click="sendChatMessage">发送</button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, nextTick } from 'vue'

export default {
  name: 'ChatSection',
  props: {
    isActive: {
      type: Boolean,
      default: false
    }
  },
  setup() {
    const chatInput = ref('');
    const chatMessages = ref([]);
    const chatMessagesRef = ref(null);

    const scrollToBottom = async (ref) => {
      await nextTick();
      if (ref.value) {
        ref.value.scrollTop = ref.value.scrollHeight;
      }
    };

    const sendChatMessage = async () => {
      if (!chatInput.value.trim()) return;

      chatMessages.value.push({
        type: 'user',
        content: chatInput.value
      });

      const userInput = chatInput.value;
      chatInput.value = '';
      await scrollToBottom(chatMessagesRef);

      try {
        chatMessages.value.push({
          type: 'assistant',
          content: ''
        });

        const eventSource = new EventSource(`http://127.0.0.1:3210/ai/finalResp?message=${encodeURIComponent(userInput)}&sessionId=1234`);

        eventSource.onmessage = (event) => {
          const content = event.data;
          const lastMessage = chatMessages.value[chatMessages.value.length - 1];
          lastMessage.content += content;
          scrollToBottom(chatMessagesRef);
        };

        eventSource.onerror = () => {
          eventSource.close();
        };
      } catch (error) {
        chatMessages.value.push({
          type: 'assistant',
          content: '抱歉，发生了错误：' + error.message
        });
        await scrollToBottom(chatMessagesRef);
      }
    };

    return {
      chatInput,
      chatMessages,
      chatMessagesRef,
      sendChatMessage
    };
  }
}
</script>

<style scoped>
.chat-container {
  height: 500px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.message {
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
}

.message.user {
  align-items: flex-end;
}

.message.assistant {
  align-items: flex-start;
}

.message-content {
  max-width: 70%;
  padding: 10px 15px;
  border-radius: 4px;
  word-wrap: break-word;
}

.message.user .message-content {
  background-color: #1890ff;
  color: white;
}

.message.assistant .message-content {
  background-color: #f0f2f5;
}

.chat-input {
  padding: 20px;
  border-top: 1px solid #e8e8e8;
  display: flex;
  gap: 10px;
}

.chat-input input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}

.chat-input button {
  padding: 8px 16px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.chat-input button:hover {
  background-color: #40a9ff;
}
</style> 